<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="address pages font-B ">
      <nav-bar :title='title' titleColor='#00374D'></nav-bar>
      <scroll-view scroll-y class="margin-t7" style="width: 100%;height: calc(100vh - 120px);">
        <view class="address-list c-b-fff">
          <view class="address-item jh-align-center" v-for="(i,index) in list" :key='index' @tap="$navigateTo('/pages/address/edit?id='+i.user_address_id)">
            <view class="jh-align-center" style="width: 240px;">
              <image :src="ossDomain + '/address-icon.png'" style="width: 14px;height: 14px;display: block;"></image>
              <view class="font-B c-333 font-14 margin-l8 margin-r5 jh-ellipsis" style="max-width: 80px;">{{i.consignee || ''}}</view>
              <view class="font-R c-999 font-12 margin-r15">{{i.mobile || ''}}</view>
              <view class="address-tag font-12 font-R jh-flex-center jh-line-height" v-if="i.is_default">默认</view>
            </view>
            <view class="font-R c-999 font-12 jh-flex-item jh-ellipsis">
              {{i.region || ''}} {{i.address || ''}}
            </view>
            <image :src="ossDomain + '/address-edit.png'" style="width: 11px;height: 11px;display: block;"></image>
          </view>
        </view>
      </scroll-view>
      <view class="jh-flex-center c-b-fff font-B c-00374D font-14 margin-t10" style="height: 43px;border-radius: 1px;" @tap="$navigateTo('/pages/address/edit')">
        添加收货地址
      </view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        title: '地址管理',
        list: []
      }
    },
    onShow() {
      this.getUserAddressList()
    },
    methods: {
      getUserAddressList () {
        this.$http.getUserAddressList().then(res => {
          console.log(res);
          this.list = res.data
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .address{
    &-list{
      // padding: 7px 0;
      // min-height: 100%;
      border-radius: 1px;
      box-sizing: border-box;
    }
    &-item{
      padding: 13px 20px;
      border-bottom: 1px solid rgba($color: #cfcfcf, $alpha: .6);
    }
    &-tag{
      padding: 2px;
      border: 1px solid #FF8125;
      border-radius: 1px;
      color: #FF8125;
    }
  }
</style>
